<script setup>

import ItemCase from "@/components/ItemCase.vue";

defineProps({enter: Boolean})
const titles = [
  '品牌定位', '数字营销', '独立站搭建', '广告拍摄与制作', '品牌设计手册', '众筹项目运营', '海外户外广告', '红人推广及联盟营销'
];
</script>

<template>
  <view class="container">
    <view class="row" v-if="enter">
      <img class="image fadeIn d1s"
           src="https://neocross.oss-cn-beijing.aliyuncs.com/sky/h5pic/img_index_service1_pic.png" alt=""/>
      <view class="intro-card fadeIn d2s">
        <view class="font150 inter" style="color: #ffffff29;">01</view>
        <view class="column intro">
          <view class="font56">品牌出海全案</view>
          <view class="font28" style="color: #ffffff80;">Comprehensive Brand Globalization Solution</view>
          <view class="row line">
            <view class="progress"/>
          </view>
          <view class="sub-title font24 top4">旨在帮助企业顺利进入国际市场，实现品牌的全球化发展。</view>
        </view>
        <ItemCase icon="icon" :titles="titles" width="25.5%" fw="100%" iw="28%"/>
      </view>
    </view>
  </view>
</template>

<style scoped>
.container {
  height: calc(100vw * (1182 / 1920));

  .image {
    width: 50%;
    height: calc(100vw * (1008 / 1920));
  }

  .intro-card {
    z-index: 1;
    height: calc(100vw * (840 / 1920));
    margin-left: -19%;
    width: 63%;
    margin-top: 6%;
    padding: 4%;
    background: linear-gradient(215deg, #383D3E 0%, #191919 100%);

    .intro {
      margin-left: 6%;
      margin-top: -12%;

      .line {
        width: 30%;
        height: 2px;
        background-color: white;
        margin-top: 4%;

        .progress {
          width: 40%;
          height: 4px;
          background-color: #04c0df;
        }
      }
    }
  }
}
</style>